<template>
    <div id="container">
      <div id="viewDiv"></div>
    </div>
  </template>
     
  <script setup>
  import {onMounted} from 'vue'
  import Map from '@arcgis/core/Map'
  import MapView from '@arcgis/core/views/MapView'
  import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
  import Legend from '@arcgis/core/widgets/Legend'
  var map,view,layer,legend
  const 国道符号 = {//创建国道符号
      type: "simple-line",
      color: "#30ffea",//也可以是[30,256,234]的形式
      width: 3
  }
  const 省道符号 = {//创建省道符号
      type: "simple-line",
      color: "#ff6207",
      width: 2
  }
  const 县道符号 = {//创建县道符号
      type: "simple-line",
      color: "#ef37ac",
      width: 1
  }
  const hwyRenderer = {
      type: "unique-value",
      field: "类型",
      legendOptions: {
          title: "公路类别"
      },
      defaultSymbol: 国道符号,
      defaultLabel: "国道",
      uniqueValueInfos: [{
          value: "省道",
          symbol: 省道符号,
          label: "省道"
      }, {
          value: "县道",
          symbol: 县道符号,
          label: "县道"
      }]
  }
  var labelingInfo=[{
       Info:{
          expression:"$feature.name"
      },
      minScale:100000,
      symbol:{
          type:"text",
          font:{
              size:10,
              family:"微软雅黑"
          },
          color:"white",
          haloColor:[50,50,50],
          haloSize:0.6
      }
  }]
  layer = new FeatureLayer({//创建要素图层
    url: "https://ws8575.club/web/rest/services/Hosted/道路_线要素_要素图层_3857/FeatureServer/0",
    renderer: hwyRenderer,
    title: "高速公路系统",
    labelingInfo:labelingInfo
  })
  onMounted(()=>{
    map = new Map({
        basemap: "dark-gray-vector",
        layers: [layer]
    })
    view = new MapView({
        map,
        container: "viewDiv",
        center: [120.2, 36.2],
        zoom: 8
    })
    legend = new Legend({
        view: view,
        layerInfos: [
            {
                layer: layer
            }
        ]
    });
    view.ui.add(legend, "top-left");
    view.ui.remove(["zoom","attribution"])
  })
  </script>
  
  <style scoped>
  #container,#viewDiv{
    width:100%; height:100%; padding:0;margin:0;
  }
  </style>
  